<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center publishupdates_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub publishupdates_fd0_0'>
          <view class='flex flex-wrap align-center publishupdates_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  publishupdates_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='publishupdates_fd0_0_c1_c0'>发布动态</text>
          </view>
          <view class='flex flex-wrap align-center justify-end publishupdates_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!--选择器开始 -->
      <benben-picker ref="benbenWritePickerCodepicker1" :visible.sync="pickerDiy1721117399020" :label.sync='typeName'
        :value.sync='typeId' :options='typeList' mode='selector' :mask-show='true' :timeout='true' :picker-height='88'
        default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between publishupdates_picker1_0'>
            <text @tap="$refs.benbenWritePickerCodepicker1.cancel()">取消</text>
            <text>标题</text>
            <text class='publishupdates_picker1_0_c2'
              @tap="$refs.benbenWritePickerCodepicker1.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择器结束 -->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout publishupdates_flex_2">
        <view class='flex flex-direction align-stretch'>
          <text class='publishupdates_fd2_0_c0'>动态类型</text>
          <view class='flex flex-wrap align-center justify-between publishupdates_fd2_0_c1' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/grzx/selectdynamic/selectdynamic?type=1`">
            <benben-input type="text" :placeholder="`请选择`" v-model="freetransactionclassification_name"
              confirm-type="done" :maxlength="-1" :adjust-position="false" :disabled='true'
              placeholder-style="color:#999;font-size:28rpx" />
            <image class='publishupdates_fd2_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"11.png"'></image>
          </view>
        </view>
        <view class='flex flex-direction align-stretch publishupdates_fd2_1'>
          <text class='publishupdates_fd2_0_c0'>动态标题</text>
          <view class='flex flex-wrap align-center justify-between publishupdates_fd2_0_c1'>
            <benben-input class='publishupdates_fd2_1_c1_c0' type="text" :placeholder="`请输入标题`" confirm-type="done"
              :maxlength="50" :adjust-position="false" :disabled='false' v-model="title"
              placeholder-style="color:#999;font-size:28rpx" />
          </view>
        </view>
        <view class='flex flex-direction align-stretch publishupdates_fd2_1'>
          <text class='publishupdates_fd2_0_c0'>正文内容</text>
          <view class='flex flex-wrap publishupdates_fd2_2_c1'>
            <benben-textarea class='flex publishupdates_input_fd2_2_c1' :placeholder="'请输入'" :adjust-position='true'
              :maxlength="500" :show-num='true' placeholder-style="color:#999;font-size:28rpx" v-model="content" />
            <template>
              <view class='flex flex justify-end publishupdates_numberfd2_2_c1_c0'>
                <text>{{content.length}}</text>
                <text>/</text>
                <text>500</text>
              </view>
            </template>
          </view>
        </view>
        <view class='flex flex-direction align-stretch publishupdates_fd2_1'>
          <text class='publishupdates_fd2_0_c0'>添加图片（{{imgUrl.length}}/9）</text>
          <benben-images-upload ref="benbenImagesUploadfd2_3_c1" :img-list.sync="imgUrl" :img-ids.sync="imgids"
            :maxlength="9">
            <template #content="{ num, maxlength, isShow}">
              <view class="flex flex-wrap align-start flex publishupdates_fd2_3_c1">

                <view v-for="(image, index) in imgUrl" :key="index"
                  class='flex position-relative publishupdates_fd2_3_c10'>
                  <text class='fu-iconfont2 position-absolute publishupdates_fd2_3_c100'
                    @tap.stop="$refs.benbenImagesUploadfd2_3_c1.delImage(index)">&#xE8E7;</text>
                  <image class='publishupdates_fd2_3_c101'
                    @tap.stop="$refs.benbenImagesUploadfd2_3_c1.previewImage(index)" mode="aspectFit" :src='image'>
                  </image>
                </view>

                <image class='publishupdates_fd2_3_c11' @tap.stop="$refs.benbenImagesUploadfd2_3_c1.manyChooseImage()"
                  v-if="isShow" mode="aspectFit" :src='STATIC_URL+"194.jpg"'></image>

              </view>
            </template>
          </benben-images-upload>
        </view>
        <view class='flex flex-direction align-stretch publishupdates_fd2_1'>
          <text class='publishupdates_fd2_4_c0'>添加标签（{{labelArr.length}}/5）</text>
          <view class='flex flex-wrap align-center self-center justify-between'>
            <view class='flex flex-wrap align-center justify-between publishupdates_fd2_0_c1'>
              <benben-input class='publishupdates_fd2_4_c1_c0_c0' type="text" :placeholder="`请输入`" confirm-type="done"
                :maxlength="5" :adjust-position="false" :disabled='false' v-model="beizhu"
                placeholder-style="color:#999;font-size:28rpx" />
            </view>
            <text class='publishupdates_fd2_4_c1_c1' @click.stop="addLabel">添加</text>
          </view>
          <view class='flex flex-wrap align-center publishupdates_fd2_4_c2'>
            <view class='flex flex-wrap align-center justify-center publishupdates_fd2_4_c2_c0 position-relative'
              v-for="(item,index) in labelArr" :key="index" @click.stop="delLabel(item,index)">
              <text>{{item}}</text>
              <image class="position-absolute icondel" :src='STATIC_URL+"205.png"'></image>
            </view>
          </view>
        </view>
        <view class=' flex flex-direction align-stretch publishupdates_fd2_1'>
          <text class='publishupdates_fd2_0_c0'>可见范围设置</text>
          <view class='flex flex-wrap align-center justify-between publishupdates_fd2_5_c1'
            v-for="(item,index) in visiblerangeArr" :key="index" @click.stop="choosevisiblerange(item)">
            <text class='publishupdates_fd2_5_c1_c0'>{{item.name}}</text>
            <view class='flex flex-wrap align-center'>
              <image class='publishupdates_fd2_0_c1_c1' v-if="item.id!=visiblerange" mode="aspectFit"
                :src='STATIC_URL+"16.png"'></image>
              <image class='publishupdates_fd2_0_c1_c1' v-else mode="aspectFit" :src='STATIC_URL+"38.png"'></image>
            </view>
          </view>
        </view>
        <view v-if="visiblerange==5">
          <button class='detail_fd5_3_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/selectfriends/selectfriends?specifyuserid=${specifyuserid}`">选择好友</button>
          <text class='detail_fd5_3_c1' v-if="specifyuserid">已选中好友{{specifyuserid.split(',').length}}</text>
        </view>
        <view class='flex flex-direction align-stretch publishupdates_fd2_1'>
          <text class='publishupdates_fd2_0_c0'>动态展示</text>
          <view class='flex flex-wrap align-center justify-between publishupdates_fd2_5_c1'
            v-for="(item,index) in dongList" :key="index" @click.stop="chooseexhibition(item)">
            <text class='publishupdates_fd2_5_c1_c0'>{{item.name}}</text>
            <view class='flex flex-wrap align-center'>
              <image class='publishupdates_fd2_0_c1_c1' v-if="item.id!=exhibition" mode="aspectFit"
                :src='STATIC_URL+"16.png"'></image>
              <image class='publishupdates_fd2_0_c1_c1' v-else mode="aspectFit" :src='STATIC_URL+"38.png"'></image>
            </view>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <view class="flex flex-wrap align-center justify-center benben-position-layout flex publishupdates_flex_3"
        :style="{height:(120+bottomSafeAreaRpx)+'rpx',paddingBottom:bottomSafeAreaRpx+'rpx', }" @click="submit">
        <button class='publishupdates_fd3_0'>发布动态</button>

      </view>
      <view :style="{height: (120+bottomSafeAreaRpx)+'rpx'}"></view>


    </view>
  </page-body>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        "fd2_2_c1": "",
        "pickerDiy1721117399020": false,
        "imgUrl": [],
        "imgids": "",
        "typeList": [],
        "typeId": "",
        "typeName": "",
        "aid": "",
        dongList: [{
          id: 1,
          name: '可售'
        }, {
          id: 2,
          name: '动态'
        }],
        aid: '',
        title: '',
        content: '',
        picture: '',
        label: '',
        exhibition: '1',
        visiblerange: '',
        specifyuserid: '',
        storageboxid: '',
        freetransactionclassification_id: '',
        freetransactionclassification_name: '',
        labelArr: [],
        visiblerangeArr: [],
        beizhu: ''
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      let {
        aid,
        partitionid,
        storageboxid,
      } = options
      if (aid !== undefined) this.aid = aid
      if (storageboxid !== undefined) this.storageboxid = storageboxid
      if (partitionid !== undefined) this.partitionid = partitionid
      if (aid) {
        this.getDetail()
      }
      this.getData()

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      uni.$on('patent', data => {
        this.freetransactionclassification_id = data.aid
        this.freetransactionclassification_name = data.classificationname
      })
      // specifyuserid
      uni.$on('specifyuser', data => {
        console.log('check', data)
        this.specifyuserid = data.join(',')
      })
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getData() {
        this.$api.post(global.apiUrls.post669b7b36579f0, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.dongList = res.data.data.exhibition
            this.visiblerangeArr = res.data.data.visiblerange
          }
        })
      },
      submit() {
        if (!this.freetransactionclassification_id) {
          this.$message.info('请选择动态标题')
          return
        }
        if (!this.content) {
          this.$message.info('请输入正文内容')
          return
        }
        if (!this.title) {
          this.$message.info('请输入标题')
          return
        }
        if (this.labelArr.length == 0) {
          this.$message.info('请输入标签')
          return
        }
        if (!this.visiblerange) {
          this.$message.info('请选择可见范围')
          return
        }
        if (this.labelArr.length == 0) {
          this.$message.info('请输入标签')
          return
        }
        this.$api.post(global.apiUrls.post6698cb65d61aa, {
          aid: this.aid,
          title: this.title,
          content: this.content,
          picture: this.imgUrl.join(','),
          label: this.labelArr.join(','),
          exhibition: this.exhibition,
          visiblerange: this.visiblerange,
          specifyuserid: this.specifyuserid,
          storageboxid: this.storageboxid,
          partitionid: this.partitionid,
          freetransactionclassification_id: this.freetransactionclassification_id
        }).then(res => {
          if (res.data.code == 1) {
            uni.navigateBack()
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      addLabel() {
        if (!this.beizhu) {
          this.$message.info('请输入标签内容')
          return
        }
        if (this.labelArr.length > 4) {
          this.$message.info('最多可添加五个标签')
        } else {
          this.labelArr.push(this.beizhu)
        }
        this.beizhu = ''
      },
      delLabel(item, index) {
        this.labelArr.splice(index, 1)
      },
      chooseexhibition(item) {
        this.exhibition = item.id
      },
      choosevisiblerange(item) {
        this.visiblerange = item.id
      },
      getDetail() {
        this.$api.post(global.apiUrls.post6698cc179ee27, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.title = res.data.data.title
            this.freetransactionclassification_id = res.data.data.freetransactionclassification_id
            this.freetransactionclassification_name = res.data.data.freetransactionclassification_classificationname
            this.exhibition = res.data.data.exhibition
            this.visiblerange = res.data.data.visiblerange
            this.imgUrl = res.data.data.picture
            this.labelArr = res.data.data.label
            this.content = res.data.data.content
            this.specifyuserid = res.data.data.specifyuserid
          }
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .detail_fd5_3_c1 {
    font-size: 24rpx;
    color: var(--benbenFontColor2);

  }

  .detail_fd5_3_c0 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 168rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    color: #fff;
    height: 56rpx;
    margin: 0 0rpx 24rpx 0rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
    padding-bottom: 200rpx;
  }

  .icondel {
    width: 24rpx;
    height: 24rpx;
    right: 0;
    top: 0
  }

  .publishupdates_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .publishupdates_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .publishupdates_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .publishupdates_fd0_0_c0 {
    width: 120rpx;
  }

  .publishupdates_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .publishupdates_picker1_0_c2 {
    color: #4781f5;
  }

  .publishupdates_picker1_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .publishupdates_flex_2 {
    margin: 16rpx auto 0rpx auto;
    width: 686rpx;
  }

  .publishupdates_fd2_5_c1_c0 {
    font-size: 32rpx;
  }

  .publishupdates_fd2_5_c1 {
    line-height: 100rpx;
    height: 100rpx;
  }

  .publishupdates_fd2_4_c2_c0 {
    background: #F6F7F9;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    // width: 128rpx;
    height: 56rpx;
    line-height: 56rpx;
    font-size: 24rpx;
    padding: 0 16rpx;
    margin: 10rpx 32rpx 0rpx 0rpx;
  }

  .publishupdates_fd2_4_c2 {
    padding: 16rpx 0rpx 16rpx 0rpx;
  }

  .publishupdates_fd2_4_c1_c1 {
    color: rgba(23, 107, 232, 1);
    font-size: 32rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
    font-weight: 600;
  }

  .publishupdates_fd2_4_c1_c0_c0 {
    width: 500rpx;
  }

  .publishupdates_fd2_4_c0 {
    color: rgba(26, 26, 26, 1);
    font-size: 32rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .publishupdates_fd2_3_c11 {
    width: 160rpx;
    height: 160rpx;
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .publishupdates_fd2_3_c101 {
    width: 160rpx;
    height: 160rpx;
  }

  .publishupdates_fd2_3_c100 {
    top: 0rpx;
    right: 0rpx;
    z-index: 2;
    color: #ff5536;
  }

  .publishupdates_fd2_3_c10 {
    margin: 0rpx 24rpx 24rpx 0rpx;
  }

  .publishupdates_fd2_3_c1 {
    width: 675rpx;
    padding: 24rpx 0rpx 0rpx 24rpx;
  }

  .publishupdates_numberfd2_2_c1_c0 {
    width: 100%;
    font-size: 24rpx;
    color: var(--benbenFontColor0);
    line-height: 46rpx;
    font-weight: 400;
  }

  .publishupdates_input_fd2_2_c1 {
    width: 100%;
    height: 140rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    white-space: pre-wrap;
  }

  .publishupdates_fd2_2_c1 {
    background: #F6F7F9;
    width: 675rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 10rpx;
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .publishupdates_fd2_1_c1_c0 {
    width: 632rpx;
  }

  .publishupdates_fd2_1 {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .publishupdates_fd2_0_c1_c1 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .publishupdates_fd2_0_c1 {
    background: rgba(246, 247, 249, 1);
    margin: 24rpx 0rpx 0rpx 0rpx;
    line-height: 100rpx;
    height: 100rpx;
    background-size: 100% auto;
    border-radius: 16rpx;
    padding: 0rpx 16rpx 0rpx 16rpx;
  }

  .publishupdates_fd2_0_c0 {
    color: rgba(26, 26, 26, 1);
    font-size: 32rpx;
  }

  .publishupdates_flex_3 {
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 120rpx;
    overflow: hidden;
    z-index: 10;
    bottom: calc(0rpx + var(--window-bottom));
    left: 0rpx;
    background-size: 100% auto;
  }

  .publishupdates_fd3_0 {
    background: linear-gradient(180deg, #176BE8 0%, #5A5CFC 100%);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    width: 686rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    height: 88rpx;
  }
</style>
